<template>
  <div style="width: 100%">
    <!-- 组件部件  名称和数量必填 但是可以一条都不添加-->
    <el-button @click="addAsset" v-if="!disabeld">新增卡片</el-button>
    <page-table
      v-model:data="tableInfo.data"
      :pager="false"
      :check-box="false"
      :tab-index="true"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
    >
    </page-table>
    <Select-asset
      v-if="selectAssetInfo.visible"
      v-model:show-dialog="selectAssetInfo.visible"
      :highlightRow="false"
      :checkBox="true"
      :tableKey="selectAssetInfo.tableKey"
      :query="selectAssetInfo.query.queryMap"
      :query-params="selectAssetInfo.query.queryParams"
      @callback="callBackAsset"
    />
  </div>
</template>

<script setup name="assetSubcard">
import { assetCardDeleteChildren } from '@/api/core'
const { proxy } = getCurrentInstance()
const props = defineProps({
  assetSubcardVOList: {
    type: Array,
    default: () => {
      return []
    },
  },
  id: {
    type: [String, Number],
  },
  disabeld: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: '',
  },
})
const tableInfo = ref({
  data: [],
  fieldList: [
    {
      label: '资产卡片号',
      value: 'assetCode',
    },
    {
      label: '资产名称',
      value: 'assetName',
    },
    {
      label: '规格',
      value: 'standard',
    },
    {
      label: '厂家',
      value: 'brandName',
    },
    {
      label: '供应商名称',
      value: 'supplierName',
    },
    // {
    //   label: '使用部门',
    //   value: 'useDeptNameRate',
    // },
    {
      label: '管理部门',
      value: 'manageDeptName',
    },
    {
      label: '使用状态',
      value: 'useStatusValue',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '删除',
        event: removeSource,
        show: true,
        ifRender: () => {
          return !props.disabeld
        },
      },
    ],
  },
})

const selectAssetInfo = ref({
  visible: false,
  tableKey: 'childCoreAssetList-com.slip.spd.entity.vo.core.CoreAssetVO',
  query: {
    queryMap: {
      id: {
        queryType: 'NOT_IN',
        queryCategory: 'AND',
        value: '',
      },
    },
    queryParams: {
      unbindAsset: true,
    },
  },
})
watch(
  () => props.assetSubcardVOList,
  (val) => {
    if (val.length) {
      val.forEach((item) => {
        if (props.id && props.type !== 'create') {
          item.deleteType = true
        }
      })
      tableInfo.value.data = proxy.$fn.deepClone(val)
    }
  },
  { deep: true }
)
function addAsset() {
  let ids = tableInfo.value.data.map((item) => item.id)
  if (props.id && props.type !== 'create') {
    ids.push(props.id)
  }
  selectAssetInfo.value.visible = true
  selectAssetInfo.value.query.queryMap.id.value = ids.length
    ? ids.toString()
    : ''
}
function callBackAsset(data) {
  if (data && data.length) {
    data.forEach((item) => {
      item.deleteType = false
    })
    tableInfo.value.data = data.concat(tableInfo.value.data)
  }
}
function removeSource(row) {
  //删除部件
  if (row.deleteType) {
    assetCardDeleteChildren(row.id).then((res) => {
      if (res && res.success) {
        tableInfo.value.data = tableInfo.value.data.filter(
          (item) => item !== row
        )
      }
    })
  } else {
    tableInfo.value.data = tableInfo.value.data.filter((item) => item !== row)
  }
}

function getassetSubcardData() {
  if (tableInfo.value.data && tableInfo.value.data.length) {
    tableInfo.value.data.forEach((item) => {
      delete item.deleteType
    })
  }
  return tableInfo.value.data
}
defineExpose({
  getassetSubcardData,
})
</script>
